<template>
  <div class="full">
    <div class="title betweenbox">
      <div>
        <span class="iconfont iconshexiangtou"></span>
        <span>智能分析</span>
      </div>
      <div class="top-back" @click="()=>{$router.push('/videomonitor')}"></div>
    </div>
    <div class="intelligent betweenbox">
      <div class="intelligent-left">
        <Left @handleNodeClick="handleNodeClick" @setControl="setControl" @setWindow="setWindow" />
      </div>
      <div class="intelligent-center">
        <Center ref="center" />
      </div>
      <div class="intelligent-right">
        <Right />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Left from "./modules/Left/index.vue";
import Center from "./modules/Center/index.vue";
import Right from "./modules/Right/index.vue";

@Component({
  components: { Left, Center, Right },
})
export default class extends Vue {
  $refs!: {
    center: Center;
  };
  // 设置云台控制
  setControl(id) {
    let obj = {
      "01": "controlUpStart",
      "02": "controlUpStop",
      "03": "controlDownStart",
      "04": "controlDownStop",
      "05": "controlLeftStart",
      "06": "controlLeftStop",
      "07": "controlRightStart",
      "08": "controlRightStop",
      "09": "controlZoomInStart",
      "10": "controlZoomInStop",
      "11": "controlZoomOutStart",
      "12": "controlZoomOutStop",
      "13": "controlFocusNearStart",
      "14": "controlFocusNearStop",
      "15": "controlFocusFarStart",
      "16": "controlFocusFarStop",
      "17": "controlIrisOpenStart",
      "18": "controlIrisOpenStop",
      "19": "controlIrisCloseStart",
      "20": "controlIrisCloseStop",
    };
    let center = this.$refs.center;
    if (center) {
      let PreviewOCX = center.PreviewOCX;
      let callback = PreviewOCX[obj[id]];
      if (callback) {
        callback.call(PreviewOCX);
      }
    }
  }
  //   窗口设置
  setWindow(num) {
    let center = this.$refs.center;
    if (center) {
      let PreviewOCX = center.PreviewOCX;
      if (PreviewOCX.setWindowsLayout) {
        PreviewOCX.setWindowsLayout(num);
      }
    }
  }
  // 树图双击时
  handleNodeClick(data) {
    // console.log(data);
    // 如果是视频节点
    if (data.type === "bdz") {
      this.dbClickVideo(data, this.setPreview);
      return false;
    }
    // 如果是点位节点
    if (data.type === "video") {
      this.setPointData(data, this.setPreview);
      return false;
    }
  }
  // 设置点位视频数据
  setPointData(item, cb) {
    console.log(item);
    let arr = item.id.split("#");
    let indexCode = arr[0];
    let data = [
      {
        stationId: item.myBdzId,
        indexCode: indexCode,
      },
    ];
    if (cb) {
      cb(data);
    }
  }
  // 设置播放数据
  setPreview(arr) {
    if (arr && arr.length) {
      let stationId = arr[0].stationId;
      let data = {
        stationId,
        list: arr,
      };
      this.$refs.center.shipinData = data;
    }
  }
  dbClickVideo(item, cb) {
    let data = {
      id: item.id,
    };
    (this as any).$services
      .queryVideoListByStation({ data })
      .then((result: any) => {
        let data = result.data || [];
        if (data.length) {
          let arr = data.map((v) => {
            return {
              stationId: item.myBdzId,
              indexCode: v.INDEXCODE,
            };
          });
          if (cb) {
            cb(arr);
          }
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  height: 0.4rem;
  font-size: 0.18rem;
  line-height: 0.4rem;
  color: #fff;
  .icongeipaishui {
    margin-right: 0.1rem;
  }
}
.intelligent {
  width: 100%;
  height: calc(100% - 0.4rem);
  &-left {
    width: 3.2rem;
    height: 100%;
  }
  &-center {
    width: calc(100% - 8rem);
    height: 100%;
  }
  &-right {
    width: 4.6rem;
    height: 100%;
  }
}
</style>